<template>
  <div id="container" class="box">
    <div class="special_focus_toolTip1" v-show="miniPanel">
      <center><button @click="showPanel" style="cursor:pointer;margin-left:2px;border:1px solid aqua;height:30px;border-radius:3px;color:aqua;background: rgba(66, 85, 99, 0.5);"><span style="margin-left:5px;margin-right:5px;">打开面板</span></button></center>
    </div>
    <div id="toolbar" v-show="maxPanel" class="special_focus_toolTip" style="width:460px;">
      
      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:10px;">
        <legend style="text-align:center"><span style="color:yellow;font-weight:bold;font-size:18px;">地图操作</span></legend>
        <span style="color:aqua;margin-left:10px;">鼠标左键地图平移，拖动鼠标右键地图放大缩小，长按鼠标滚轮旋转地图,滚动鼠标滚轮也可放大缩小地图。</span>
      </fieldset>

      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:10px;margin-bottom:10px;">
        <legend><span style="color:yellow;font-weight:bold;font-size:16px;">操作功能</span></legend>
        <table align="center">
          <tr>
            <td align="center">
              <center>
                <button v-if="modelOpen==false" @click="showModel" style="cursor:pointer;border:1px solid aqua;height:30px;border-radius:3px;color:aqua;background: rgba(66, 85, 99, 0.5);"><span style="margin-left:5px;margin-right:5px;">打开三维</span></button>
                <button v-if="modelOpen==true" @click="hiddenModel" style="cursor:pointer;border:1px solid aqua;height:30px;border-radius:3px;color:aqua;background: rgba(66, 85, 99, 0.5);"><span style="margin-left:5px;margin-right:5px;">关闭三维</span></button>
              </center>
            </td>
            <td align="center">
              <center><button @click="hiddenPanel" style="cursor:pointer;margin-left:10px;border:1px solid aqua;height:30px;border-radius:3px;color:aqua;background: rgba(66, 85, 99, 0.5);"><span style="margin-left:5px;margin-right:5px;">关闭面板</span></button></center>
            </td>
          </tr>
        </table>
      </fieldset>
    </div>
    <div id="cesiumContainer">
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        url: null,
        modelOpen: true,
        radio: null,
        maxPanel: true,
        miniPanel: false,
      }
    },
    created() {
      this.url = this.$route.query.url;
    },
    mounted() {
        this.init(this.url);
    },
    computed: {},
    methods: {
      hiddenModel(){
        window.tileset.show = false;
        this.modelOpen = false;
      },
      showModel(){
        window.tileset.show = true;
        this.modelOpen = true;
      },
      showPanel(){
        this.maxPanel = true;
        this.miniPanel = false;
      },
      hiddenPanel(){
        this.maxPanel = false;
        this.miniPanel = true;
      },
      init(url) {
        Cesium.Ion.defaultAccessToken =
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYzI1YjE0MS05YjYzLTQ4MjYtODAyMS03YTdmZTllYjlmNTIiLCJpZCI6NjE3NDQsImlhdCI6MTY5NzQ1NzM0Mn0.4iT43DCcj3UiNeg6fbf5sfEp-wcHFwYzym6YV9KV8O4';
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
        var viewer = new Cesium.Viewer('cesiumContainer', {
          terrainProvider: Cesium.createWorldTerrain(),
          animation: false, //是否显示动画控件
          // shouldAnimate: true,
          homeButton: true, //是否显示Home按钮
          fullscreenButton: false, //是否显示全屏按钮
          baseLayerPicker: false, //是否显示图层选择控件
          geocoder: false, //是否显示地名查找控件
          timeline: false, //是否显示时间线控件
          // creditContainer: "credit", //版权图标
          sceneModePicker: false, //是否显示投影方式控件
          navigationHelpButton: false, //是否显示帮助信息控件
          infoBox: false, //是否显示点击要素之后显示的信息
          selectionIndicator: false, //是否启用地图选择
          // sceneModePicker: true,//是否启用场景选择小部件
          // requestRenderMode: false, //启用请求渲染模式
          //sceneMode: 3,
          shadows: false,
          imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
          }),
          contextOptions: {
            webgl: {
              antialias: true,
              multisample: true
            }
          }
        });
        viewer.homeButton.container.childNodes[0].title = "回到主图";
        viewer._cesiumWidget._creditContainer.style.display = "none";
        // viewer.scene.globe.depthTestAgainstTerrain = false;
        window.viewer = viewer;
        window.scene = viewer.scene;
        const _this = this;

        const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        //   url: 'http://192.168.2.253:9000/d67d1383448c4937bda9aed26e506d30/Production_4.json',
          url: url,
          maximumScreenSpaceError: 1,
          maximumMemoryUsage: 2048,
          skipLevelOfDetail: true,
          preferLeaves: true,
          skipLevels: 1,
          immediatelyLoadDesiredLevelOfDetail: false,
          loadSiblings: false,
          cullWithChildrenBounds: true,
          preloadFlightDestinations: true,
          dynamicScreenSpaceError: true,
          dynamicScreenSpaceErrorDensity: 0.00278,
          dynamicScreenSpaceErrorFactor: 4.0,
          dynamicScreenSpaceErrorHeightFalloff: 0.25,
          unionClippingRegions: true,
        }));
        tileset.show = true;
        window.tileset = tileset;

        // 扩展主图初始中心点
        viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e) {
          e.cancel = true;
          viewer.entities.removeAll();
          // 石林中心坐标
          viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(101.54207870384654,25.08458559119483, 1500),
            // destination: Cesium.Cartesian3.fromDegrees(103.40918094,24.34153228,2500),
            orientation: {
              heading :Cesium.Math.toRadians(35), // 方向
              pitch :Cesium.Math.toRadians(-90.0),// 倾斜角度
              roll :0
            },
          });
        });

        // 定义的中心点
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(101.54207870384654,25.08458559119483, 2000),
            orientation: {
            heading :Cesium.Math.toRadians(35), // 方向
            pitch :Cesium.Math.toRadians(-90.0),// 倾斜角度
            roll :0
            },
        });

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function(movement) {
          let ray = viewer.camera.getPickRay(movement.position);
          let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
          if(cartesian!=undefined){
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
            let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
            let alt = cartographic.height; // 高度
            let coordinate = {
                longitude: Number(lng.toFixed(14)),
                latitude: Number(lat.toFixed(14)),
                altitude: Number(alt.toFixed(8))
            };
            console.log("点击位置坐标：",coordinate)
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
    },
  }

</script>
<style lang="scss" scoped>
  html,
  body,

  #container{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
  }
  #cesiumContainer {
    width: inherit;
    height: inherit;
  }

  .box {
    height: 100%;
  }

  .special_focus_toolTip1 {
    margin: 5px;
    z-index: 7;
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    border-style: solid;
    border-width: 0px;
    border-radius: 4px;
    color: #ffffff;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 21px;
    padding: 2px 2px;
  }

  .special_focus_toolTip {
    margin: 5px;
    z-index: 7;
    position: absolute;
    display: block;
    width: 400px;
    height: auto;
    border-style: solid;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
      top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(66, 85, 99, 0.5);
    border-width: 0px;
    border: 1px solid aqua;
    border-radius: 4px;
    color: #ffffff;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 21px;
    padding: 10px 10px;
  }

#bottom-right {
  background: rgba(66, 85, 99, 0.8);
  padding: 4px;
  border-radius: 4px;
  position: absolute;
  display: block;
  height: auto;
  bottom: 0px;
  right: 0px;
}

#bottom-right1 {
  background: rgba(66, 85, 99, 0.8);
  padding: 4px;
  border-radius: 4px;
  position: absolute;
  display: block;
  height: auto;
  bottom: 0px;
  right: 0px;
}

.radioImg .el-radio__input {
  display: none;
}
.radioImg .el-radio__inner {
  display: none;
}
.radioImg .el-radio .is-bordered {
  padding: 0px;
}
.radioImg .v-image {
  border-radius: 4px;
}
.radioImg .el-radio {
  margin: 10px;
}
.radioImg .el-radio__label div {
  margin: -26px 0px 0px -10px;
}
.radioImg .el-radio__label .v-image__image {
  margin: 0;
}
.radioImg .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 10px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,th {
    padding: 0;
}

.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid aqua;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,.pure-table th {
    border-left: 1px solid aqua;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}

.pure-table thead {
  background-color: rgba(66, 85, 99, 0.5);
  color: aqua;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid aqua;
}

.pure-table td {
    background-color: transparent;
}

.pure-table-bordered td {
    border-bottom: 1px solid aqua;
}

.pure-table-bordered tbody>tr:last-child>td {
    border-bottom-width: 0;
}

/*横条样式*/
input[type=range] {
  -webkit-appearance: none;/*清除系统默认样式*/
  width: 100%;
  background: -webkit-linear-gradient(aqua, aqua) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
  background-size: 100%;/*设置左右宽度比例*/
  height: 3px;/*横条的高度*/
}

/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;/*清除系统默认样式*/
  height: 16px;/*拖动块高度*/
  width: 16px;/*拖动块宽度*/
  background: aqua;/*拖动块背景*/
  border-radius: 50%; /*外观设置为圆形*/
  border: solid 1px aqua; /*设置边框*/
}

input[type=checkbox]{
  width: 16px;
  height: 16px;
  border: 1px solid aqua;
  margin-top: 2px;
  position: relative;
}
.popUp {
  display: none;
  position: absolute;
  z-index: 99;
  width: 140px;
  border: 1px solid aqua;
  border-radius: 5px;
  background: rgba(66, 85, 99, 0.6);
  color: aqua;
}

::v-deep .el-tabs__item {
  color: aqua;
}

::v-deep .el-tabs__item.is-active{    //切换活动项的文字颜色
  color:yellow !important;
}
</style>
